/*
  全屏：z-index:100000010  播放器 100000000
  弹框：100000100
  清屏：100000050
  
*/
page {
  background: #11122c;
  background-size: 100% 100%;
}



/*
   *  ┌─────────────────────────────────────────────────────────────┐
   *  @ live-player  和 video 工具栏公用
   *  └─────────────────────────────────────────────────────────────┘
   * 
   */

.progress-container {
  height: 60rpx;
  display: flex;
  align-items: center;

}

.toolbar-container {
  background: linear-gradient(to top, rgba(0, 0, 0, .666) 0, rgba(0, 0, 0, .492) 19%, rgba(0, 0, 0, .36) 34%, rgba(0, 0, 0, .254) 47%, rgba(0, 0, 0, .185) 56.5%, rgba(0, 0, 0, .129) 65%, rgba(0, 0, 0, .084) 73%, rgba(0, 0, 0, .05) 80.2%, rgba(0, 0, 0, .028) 86.1%, rgba(0, 0, 0, .014) 91%, rgba(0, 0, 0, .005) 95.2%, rgba(0, 0, 0, .001) 98.2%, rgba(0, 0, 0, 0) 100%);
}

.progress-control {
  height: 30rpx;
  position: relative;
  flex: 1;
}

.progress-holder {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  border-radius: 5rpx;
  height: 10rpx;
  background-color: rgba(115, 133, 159, .5);
}

.progress-slidebar {
  height: 10rpx;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(0, -50%);
  background: #00a4ff;

  &:before {
    content: "";
    position: absolute;
    width: 36rpx;
    height: 36rpx;
    border-radius: 50%;
    right: -14rpx;
    top: 50%;
    transform: translate(0, -50%);
    background: #fff;
  }
}


// .handle-holder {
//   margin: 30rpx;
//   display: flex;
//   justify-content: space-between;
// }


.handle-popup {
  position: relative;

  .list {
    position: absolute;
    left: 50%;
    width: 150rpx;
    bottom: 60rpx;
    transform: translate(-50%, 0);
    background-color: rgba(0, 0, 0, 0.5);
    white-space: nowrap;
    border-radius: 15rpx;

    &:after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: -40rpx;
      transform: translate(-50%, 0);
      width: 0;
      height: 0;
      border-width: 20rpx;
      border-style: solid;
      border-color: rgba(0, 0, 0, 0.5) transparent transparent transparent;

    }

    .item {
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      &.active {
        background: #000;
      }
    }
  }


}


// 


.player-live-txt {
  padding-left: 20rpx;
  position: relative;

  &:before {
    content: "";
    width: 10rpx;
    height: 10rpx;
    border-radius: 100%;
    background: #f60;
    position: absolute;
    left: 5rpx;
    top: 50%;
    transform: translate(0, -50%);
  }
}


.living-h-none {
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 10;
  background-image: url(https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/teacher-bg.png);
}

.living-v-none {
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 10;
}


// 视频加载
.video-loading {
  position: absolute;
  left: 50%;

  top: 50%;
  transform: translate(-50%, -50%);



  .pic {
    width: 70rpx;
    line-height: 70rpx;
    font-size: 70rpx;
    color: #fff;
    transform-origin: center;
    animation: loading 2s linear infinite;
    -webkit-animation: loading 2s linear infinite;
  }
}

@keyframes loading {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}

.dynic-space-r {
  margin-right: 30rpx;
}

.dynic-space-l {
  margin-left: 30rpx;
}



.full-screen-type {
  z-index: 100000010;



  .dynic-space-r {
    margin-right: 45rpx;
  }

  .dynic-space-l {
    margin-left: 45rpx;
  }

}

.clear-screen-type {
  .toolbar-container {
    visibility: hidden;
  }
}



// **************** 视频区域 ******************
.mod-video {
  &.horizontal {
    position: absolute;
    width: 100vw;
    height: 56.25vw;
    flex-shrink: 0;
    margin-top: 310rpx;
  }

  &.vertical {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
  }
}

.live-cover {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-position: center;
  background-size: 100% auto;
  background-repeat: no-repeat;

  &:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .3);
  }
}

.start-tip-btn {
  width: 200rpx;
  height: 70rpx;
  border-radius: 40rpx;
  background: linear-gradient(-90deg, #ff7225, #fbb449);
}



/*
   *  ┌─────────────────────────────────────────────────────────────┐
   *  @ live-player
   *  └─────────────────────────────────────────────────────────────┘
   * 
   */
.live-player {
  width: 100%;
  height: 100%;
}

/*
   *  ┌─────────────────────────────────────────────────────────────┐
   *  @ video
   *  └─────────────────────────────────────────────────────────────┘
   * 
   */
.live-video {
  width: 100%;
  height: 100%;
}


.live-review-cover {
  background-size: 100%;
  background-repeat: no-repeat;
  background-color: #fff;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

/*
   *  ┌─────────────────────────────────────────────────────────────┐
   *  @ footer
   *  └─────────────────────────────────────────────────────────────┘
   * 
   */
.mod-footer {
  // background: #fff;
  height: 70rpx;
  padding: 30rpx;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
}

.more {
  width: 40rpx;
  height: 40rpx;
  background: url("https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/27_material_admin/image/images/more_1.png") no-repeat center center;
  background-size: 100%;
}

.dai-huo {
  width: 50rpx;
  height: 50rpx;
  background: url("https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/27_material_admin/image/images/img_recommend.png") no-repeat center center;
  background-size: 100%;
}

.da-shang {
  width: 50rpx;
  height: 50rpx;
  background: url("https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/27_material_admin/image/images/img_reword.png") no-repeat center center;
  background-size: 100%;
}

.lian-mai {
  width: 45rpx;
  height: 45rpx;
  background: url("https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/27_material_admin/image/images/lian_mai.png") no-repeat center center;
  background-size: 100%;
}

.praise {
  width: 45rpx;
  height: 45rpx;
  background: url("https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/27_material_admin/image/images/dian_zhan.png") no-repeat center center;
  background-size: 100%;
}

.placeholder {
  color: #DEDEDE;
}



.dm-container {
  position: fixed;
  left: 30rpx;
  bottom: 130rpx;
  height: 360rpx;
  width: 560rpx;
  overflow: hidden;
}

.dm-scroll {
  width: 100%;
  height: 100%;
}


.test {
  position: fixed;
  left: 0;
  z-index: 999999999;
  color: #fff;
}

.newmsg-count-tip {
  min-width: 132rpx;
  height: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border-radius: 22rpx;
  position: absolute;
  z-index: 99;
  bottom: 0rpx;
  left: 0;
  font-weight: 500;
  font-size: 22rpx;
  color: #2979FF;
}

.dm-container {
  .newmsg-count-tip {
    z-index: 99;
    bottom: 0rpx;
    left: 0;
  }
}

.chatlist-popup {
  .newmsg-count-tip {
    top: 30rpx;
    left: 50%;
    transform: translate(-50%, 0);
  }
}

// .chat-tab-bd {
//   height: 100%;
//   overflow: hidden;
// }

/*
   *  ┌─────────────────────────────────────────────────────────────┐
   *  @ 授课区讨论区弹窗
   *  └─────────────────────────────────────────────────────────────┘
   * 
   */
.chatlist-popup {}

.chat-tab-hd {
  height: 106rpx;
  border-radius: 28rpx 28rpx 0 0;
  border-bottom: 2rpx solid #f5f5f5;
  display: flex;
  flex-direction: row;

  .item {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 30rpx;
    font-size: 32rpx;
    color: #999;
    position: relative;

    &:after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -2rpx;
      height: 4rpx;
      background: #2979FF;
      border-radius: 2rpx;
      width: 100%;
      display: none;
    }

    &.active {
      color: #333;
      font-weight: 600;

      &:after {
        display: block;
      }
    }
  }
}


.chatlist-scroll {
  height: 100%;
  background-color: #F6F7F8;
}

.chat-tab-ft {
  padding: 30rpx;
  background: #fff;

  .ipt-chat {
    height: 70rpx;
    background-color: #F6F7F8;
    border-radius: 34px;
    font-size: 28rpx;
    padding: 0 30rpx;
    color: #333;
    width: 100%;
    color: #666;
    box-sizing: border-box;
  }

  .placeholder {
    color: #ccc;
  }
}

.mod-topbar {
  max-width: 70%;
  overflow: hidden;
}

// 
.mod-header {


  .entry-share {
    width: 108rpx;
    height: 40rpx;
    background: rgba(155, 149, 149, 0.44);
    border-radius: 20rpx;
    color: #fff;
    font-size: 22rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 18rpx;
  }

  .entry-lianmai {
    width: 144rpx;
    height: 40prx;
    background: rgba(155, 149, 149, 0.44);
    border-radius: 20rpx;
    color: #fff;
    font-size: 22rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 18rpx;
  }

}


// 更多设置

.more-popup {
  background: #FFFFFF !important;
  padding: 0 30rpx 30rpx;

  .wx-switch-input {
    zoom: 0.75;
    background: #404040;
  }

  .hd-pic {
    width: 70rpx;
    height: 70rpx;
    background: url("https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/27_material_admin/image/images/choujiang/choujiang_entry_tip.png");
    background-size: 100% 100%;
  }
}


.canvas-spread {
  position: absolute;
  left: 0;
  top: 0;
  width: 750px;
  height: 1334px;



}

.talent-entry {
  width: 142rpx;
  height: 40rpx;
  background-image: linear-gradient(138deg, #0256FF 0%, #2D7CFD 100%);
  border-radius: 20rpx;
  color: #fff;
  font-size: 22rpx;

  .pic-icon {
    height: 30rpx;
    width: 19rpx;
    background: url("https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/27_material_admin/data/image/da_ren_bang_icon.gif") no-repeat top center;
    background-size: 100% 100%;
    margin: 0 10rpx 0 0;
  }
}


.praiseNunber {
  background-image: linear-gradient(145deg, #ff5a23 8%, #ff2350 95%);
}

.praise-anim {
  animation: praiseHeartBeat 0.75s linear;
}

@keyframes praiseHeartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}


.marque-copyright {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
}

.copyright-marque {
  animation: livemarquemove linear infinite;
}

@keyframes livemarquemove {
  from {
    transform: translateX(100vw);
  }

  to {
    transform: translateX(-100%);
  }
}

// 抽奖
.aside-left-entry {
  position: fixed;
  left: 20rpx;
  top: 350rpx;
  z-index: 1000000;

  .item-cj {
    position: relative;

    .pic {
      width: 72rpx;
      height: 72rpx;
      background: url("https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/27_material_admin/image/images/choujiang/choujiang_entry_tip.png") no-repeat top center;
      background-size: 100% 100%;
    }

    .time {
      background: rgba(0, 0, 0, 0.32);
      border-radius: 30rpx;
      position: absolute;
      bottom: 0;
      width: 100%;
      color: #fff;
      left: 50%;
      font-size: 22rpx;
      text-align: center;
      transform: translate(-50%, 0);
      white-space: nowrap;
    }
  }

  .item-welfare {
    position: relative;

    .pic {
      width: 72rpx;
      height: 72rpx;
      background: url("https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/27_material_admin/image/images/welfare/icon_box.png") no-repeat top center;
      background-size: 100% 100%;
    }

    .num {
      width: 30rpx;
      height: 30rpx;
      border-radius: 50%;
      background: #ff5252;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      right: -2rpx;
      top: -8rpx;
      font-size: 20rpx;
    }
  }

  .item-gudide-qrcode {
    .pic {
      width: 72rpx;
      height: 72rpx;
      background: url("https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/27_material_admin/image/images/weixin.png") no-repeat top center;
      background-size: 100% 100%;
    }
  }
}

// 打赏样式

.reward-anim-box {
  position: absolute;
  left: 20rpx;
  transform: translateX(-1000rpx);
  bottom: 35%;
  height: 96rpx;
  z-index: 20;

  .area-lf {
    width: 445rpx;
    padding: 0 40rpx;
    height: 100%;
    background: url("https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/27_material_admin/image/images/reward/reward-bg.png") no-repeat center center;
    background-size: cover;
    border-radius: 50rpx 0 0 50rpx;
    font-size: 30rpx;
    color: #fff;
  }



  .pic-mark {
    width: 56rpx;
    height: 50rpx;
    background: url("https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/27_material_admin/image/images/reward/X.png") no-repeat top center;
    background-size: cover;
  }


  .pic-gift {
    width: 80rpx;
    height: 80rpx;
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
  }

  .pic-num {
    width: 54rpx;
    height: 76rpx;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    &.type-0 {
      background-image: url("https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/27_material_admin/image/images/reward/0.png");
    }

    &.type-1 {
      background-image: url("https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/27_material_admin/image/images/reward/1.png");
    }

    &.type-2 {
      background-image: url("https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/27_material_admin/image/images/reward/2.png");
    }

    &.type-3 {
      background-image: url("https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/27_material_admin/image/images/reward/3.png");
    }

    &.type-4 {
      background-image: url("https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/27_material_admin/image/images/reward/4.png");
    }

    &.type-5 {
      background-image: url("https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/27_material_admin/image/images/reward/5.png");
    }

    &.type-6 {
      background-image: url("https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/27_material_admin/image/images/reward/6.png");
    }

    &.type-7 {
      background-image: url("https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/27_material_admin/image/images/reward/7.png");
    }

    &.type-8 {
      background-image: url("https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/27_material_admin/image/images/reward/8.png");
    }

    &.type-9 {
      background-image: url("https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/27_material_admin/image/images/reward/9.png");
    }
  }
}